<template>
<div id="app">
<!--  头部-->
  <Header notab="join"></Header>
  <div class="contentWeb">
    <!--  标题-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="detailCrumb">
      <el-breadcrumb-item>招聘会</el-breadcrumb-item>
      <el-breadcrumb-item style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;">{{info.title}}</el-breadcrumb-item>
      <el-breadcrumb-item>全部企业</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="companylistcontainer">
      <div class="head">
        <div class="head-item ">
          <div class="qanhuiqiye">参会企业</div>
        </div>
        <div class="head-item">
          <div class="canhuisearch" style="margin-top: 15px;">
              <el-input placeholder="输入企业名称快速查询" v-model="search.companyName" class="input-with-select">

                <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
              </el-input>
          </div>
        </div>
      </div>
      <el-row :gutter="30">
        <div v-if="total * 1 > 0">
          <el-col :span="12" v-for="(item, index) in job_list" :key="index" >
            <div class="grid-content bg-purple">
              <div class="company">
                <div class="companyLogo"><img :src="item.logo" alt=""></div>
                <div class="companyContent">
                  <div class="companyName" @click="toInfo(item.enterpriseUid)">{{item.name}}</div>
                  <div class="companyTip">
                    <span style="padding-right: 14px">{{item.industry}}</span>
                    <span>|</span>
                    <span style="padding:0 14px">{{item.enterpriseNature}}</span>
                    <span>|</span>
                    <span style="padding-left: 14px">{{item.companySize}}</span>
                  </div>
                  <div class="solid"></div>
                  <div class="companyDetail">
                    <span class="detail_item1">招聘职位</span>
                    <span class="detail_item2" style="color: #20a2b2;padding-right: 73px">{{item.recruitPositionNum}}</span>
                    <span class="detail_item1 on">招聘人数</span>
                    <span class="detail_item2" style="color: #f23f00;">{{item.zprs}}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-row>
      <div style="text-align: center">
        <div v-if="total * 1 > 0">
        <el-pagination background layout="prev, pager, next"
          @current-change="onPageChange"
          :current-page="search.pageNum"
          :page-size="search.pageSize"
          :total="total"></el-pagination>
        </div>
      </div>
    </div>

  </div>

  <Footer></Footer>
  </div>
</template>

<script type="text/babel">

import Footer from '@/components/footer'
import Header from '@/components/header'
import mt from '../../assets/img/mt.png'
import { DetailJobFairId, GetQueryString, getJFAllEnterprise, searchJobFairEnterprisesByPage } from '../../assets/js/domains'
export default {
  name: 'App',
  data: function () {
    return {
      total: 0,
      input3: '',
      mt: mt,
      job_fair_id: '',
      info: {},
      search: {
        pageNum: 1,
        pageSize: 36,
        jf_id: '',
        companyName: ''
      },
      job_list: []
    }
  },
  components: {
    Footer,
    Header
  },
  created: function () {
    document.title = '找工作'
    this.job_fair_id = GetQueryString('id')
    this.getJFAllEnterprise()
  },
  mounted: function () {
    this.getDetailJobFairId()
  },
  methods: {
    getDetailJobFairId: function () {
      const _this = this
      if (localStorage.getItem('shenfen') == 1) {
        this.userUid = localStorage.getItem('md_enterpriseUid')
      } else {
        this.userUid = localStorage.getItem('md_user_uid')
      }
      DetailJobFairId({ job_fair_id: this.job_fair_id, userUid: this.userUid }).then(function (res) {
        if (res.code === 200) {
          _this.info = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getJFAllEnterprise: function () {
      const _this = this
      _this.search.jf_id = _this.job_fair_id
      // _this.search.companyName = _this.search.companyName ? _this.search.companyName : ''
      getJFAllEnterprise(_this.search).then(function (res) {
        if (res.code === 200) {
          _this.job_list = res.data.content
          _this.total = res.data.totalElements
        }
      })
    },
    onSearch () {
      const _this = this
      const param = Object.assign({}, this.search)
      param.enterprise_name = param.companyName
      param.pageNum = 1
      param.pageSize = 1000
      searchJobFairEnterprisesByPage(param).then(res => {
        if (res.code === 200) {
          _this.job_list = res.data.content
          _this.total = res.data.totalElements
        }
      })
    },
    onPageChange (curPage) {
      const param = Object.assign({}, this.search)
      param.pageNum = curPage
      searchJobFairEnterprisesByPage(param).then(res => {
        if (res.code === 200) {
          this.job_list = res.data.content
          this.total = res.data.totalPages
        }
      })
    },
    toInfo: function (id) {
      window.location.href = 'companyDetail.html?enterpriseUid=' + id
    }
  }
}
</script>

<style lang="less">
  @import "../../assets/css/companylist";
</style>
